<template>
  <div id="app">
    <el-row class="tac">
      <el-col :span="3">
        <h5>供应商管理系统</h5>
        <el-menu class="el-menu-vertical-demo" router>
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">主页</span>
          </el-menu-item>
          <el-menu-item index="/supplierManager">
            <i class="el-icon-document"></i>
            <span slot="title">供应商(Old)</span>
          </el-menu-item>
          <el-menu-item index="/test">
            <i class="el-icon-s-claim"></i>
            <span slot="title">供应商(New)</span>
          </el-menu-item>
          <el-menu-item index="/roleManage">
            <i class="el-icon-setting"></i>
            <span slot="title">角色管理(Old)</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="21">
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

/* 隔行变色 */
.data-table:nth-child(odd) {
  background-color: #f6cccc;
}

.data-table:nth-child(even) {
  background-color: #a9e0c8;
}

.td-mouseover {
  background-color: yellowgreen;
  /*font-size: 20px;*/
  color: red;
}

input {
  font-size: large;
}
</style>
